<template>
  <el-dialog v-el-drag-dialog :title="!form.brandId?'新建品牌':'编辑品牌'" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-form ref="brandForm" :model="form" :rules="rules" label-width="120px" :disabled="!hasLoaded">
      <el-form-item hidden>
        <el-input v-model="form.brandId" hidden />
      </el-form-item>

      <el-card>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="检索首字母" prop="firstLetter">
          <el-input v-model="form.firstLetter" />
        </el-form-item>
        <el-form-item label="logo" prop="logo">
          <el-image style="height:50px;float:left;border: none" :src="getImageSrc(form.logo)" alt="点击更换logo" fit="fill" @click="changeLogo">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" @click="changeLogo" />
            </div>
          </el-image>
        </el-form-item>
        <el-form-item label="排序" prop="brandSort">
          <el-input-number v-model="form.brandSort" :min="1" />
        </el-form-item>
        <el-form-item label="状态" prop="showStatus">
          <el-radio-group v-model="form.showStatus">
            <el-radio-button v-for="item in optionOfStatus" :key="'option_' + item.dictValue" :label="item.dictValue">
              {{ item.dictLabel }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="介绍" prop="remark">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-card>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">确 定</el-button>
      <el-button icon="el-icon-close" @click="onClose">关 闭</el-button>
    </span>

    <el-dialog title="logo" :modal="false" :visible.sync="openLogoDialog">
      <image-cropper ref="logoCrop" :fixed-size="false" :upload-url="uploadLogoFinalUrl" @onSuccess="setLogo" />
    </el-dialog>
  </el-dialog>
</template>

<script>
import { brandLoad, brandSave } from '@/api/mall/product/brand'
import ImageCropper from '@/components/ImageCropper'

export default {
  name: 'PostFormDialog',
  components: {
    ImageCropper
  },
  data() {
    return {
      visible: false,
      appendToBody: false,
      hasLoaded: false,
      form: {
        brandId: undefined,
        name: undefined,
        firstLetter: undefined,
        logo: undefined,
        brandSort: 1,
        showStatus: '0',
        remark: ''
      },
      rules: {
        name: [{ required: true, message: '品牌名称不能为空' }],
        firstLetter: [{ required: true, message: '检索首字母不能为空' }]
      },
      uploadLogoFinalUrl: `${process.env.VUE_APP_MODULE_MALL_API}/api/mall/brand/uploadLogoFinal`,
      optionOfStatus: [],
      openLogoDialog: false
    }
  },
  methods: {
    init(brandId) {
      this.hasLoaded = false
      this.form.brandId = brandId || null
      this.visible = true
      this.$nextTick(() => {
        this.loadForm(brandId)
        this.getDictData()
      })
    },
    loadForm(brandId) {
      brandLoad({ 'id': brandId }).then(response => {
        this.form = this.$api.objectUpdate(this.form, response.param)
        // 判断当前用户权限
        this.hasLoaded = this.$perm.hasPermissionOr(['mall:brand:edit'])
      }).catch(() => {})
    },
    getDictData() {
      this.$dictGroup('sys_show_hide').then(response => {
        this.optionOfStatus = response
      }).catch(e => {})
    },
    getImageSrc(value) {
      return this.$api.getImageSrc(value)
    },
    changeLogo() {
      this.openLogoDialog = true
      this.$nextTick(() => {
        let avatarUrl
        if (this.form.logo) {
          avatarUrl = this.$store.getters.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/public/file/preview/` + this.form.logo
        } else {
          avatarUrl = ''
        }
        this.$refs.logoCrop.init(avatarUrl)
      })
    },
    setLogo(logoId) {
      this.form.logo = logoId
      this.openLogoDialog = false
    },
    onSubmit() {
      this.$refs.brandForm.validate(valid => {
        if (valid) {
          brandSave(this.form).then(response => {
            this.$modal.msgSuccess(response.msg)
            this.$emit('confirmForm')
            this.onClose()
          }).catch(() => {})
        }
      })
    },
    onClose() {
      this.$refs.brandForm.resetFields()
      this.visible = false
    }
  }
}
</script>
